<template>
    <!-- 工作台 -->
    <div style="padding: 10px 0;" :style="{'background-color': backGround}">
        <van-nav-bar :z-index="10" fixed title="模板详情" left-text="返回" :right-text="drafting ? '确定' : '排版'" left-arrow @click-left="goBack" @click-right="editTemps"/>
        
        <!-- 颜色设置 -->
        <section class="colorSet">
            <van-row type="flex" justify="start">
                <van-col span="4" offset="1">
                    <van-button size="mini" @click="setHex">HEXcolor</van-button>
                </van-col>
                <van-col span="3" offset="1">
                    <colorPicker id="color" v-model="color"/>
                </van-col>
                <van-col span="15" class="sets">
                    <div @click="getHex('#F2F6FC')" style="background-color: #F2F6FC"></div>
                    <div @click="getHex('#EF9A9A')" style="background-color: #EF9A9A"></div>
                    <div @click="getHex('#F48FB1')" style="background-color: #F48FB1"></div>
                    <div @click="getHex('#1DABA0')" style="background-color: #1DABA0"></div>
                    <div @click="getHex('#384146')" style="background-color: #384146"></div>
                </van-col>
            </van-row>
        </section>
        
        <draggable element="section" v-model="valueCache" :options="{animation:200, disabled: !drafting}">
            <section v-for="(temp, index) in valueCache" :key="index">
                <van-row type="flex" justify="end">
                    <i v-show="!drafting" class="iconfont ali-kujialeqiyezhan_zhinengbuju" @click="setGrid(temp)"></i>
                    <i v-show="drafting" class="iconfont ali-tuozhuai"></i>
                    <i v-show="!drafting" class="iconfont ali-cc-close-square" @click="delTemp(index)"></i>
                </van-row>
                <component 
                    class="tempRow" 
                    :is="temp.temp" 
                    :style="!temp.setting ?'': fmtPx(temp.setting)" 
                    :tempEngine="temp"
                    >
                </component> 
            </section>
        </draggable>

        <section class="slider" v-show="grid.show">
            <slider-set ref="slider" @close="grid.show = false" :setTemp="setTemp"></slider-set>
        </section>
        <section class="slider" v-show="hex.show">
            <hex-set @close="hex.show = false"></hex-set>
        </section>

        <!-- 每个元素的两侧间隔相等 -->
        <van-row type="flex" justify="space-around" class="btn">
            <van-col span="6" :offset="2" class="add">
                <van-button size="small" @click="addTemp">添加模板</van-button>
            </van-col>
            <van-col span="6" v-show="cacheTemp.length > 0">
                <van-button size="small" plain type="primary" @click="saveTemp">保存</van-button>
            </van-col>
            <van-col span="6">
                <van-button size="small" plain type="danger" @click="del">删除</van-button>
            </van-col>
        </van-row>
    </div>
</template>
<script>
import bannerTemp   from '@/components/temp/banner'
import oneBoxTemp   from '@/components/temp/oneBox'
import twoBoxTemp   from '@/components/temp/twoBox'
import threeBoxTemp from '@/components/temp/threeBox'
import oneTwoTemp   from '@/components/temp/oneTwoBox'
import twoOneTemp   from '@/components/temp/twoOneBox'
import fourBoxTemp  from '@/components/temp/fourBox'
import noticeTemp  from '@/components/temp/notice'
import { mapGetters } from 'vuex'
import draggable from 'vuedraggable'
import sliderSet from '@/components/sliderSet'
import hexSet from '@/components/hexSet'
import { menu_updateById, menu_delById } from '@/api/menu'
import {setCls} from './setting'

export default {
    components: {
        bannerTemp,
        oneBoxTemp,
        twoBoxTemp,
        threeBoxTemp,
        oneTwoTemp,
        twoOneTemp,
        fourBoxTemp,
        noticeTemp,
        draggable,
        sliderSet,
        hexSet
    },
    computed: {
        ...mapGetters(['cacheTemp', 'tempId', 'backGround']),
        valueCache: {
            get(){
                return this.cacheTemp
            },
            async set(list){
                await this.$store.dispatch('updateCacheTemp', list)
            }
        },
        color: {
            get(){
                return this.backGround
            },
            set(val){
                this.$store.dispatch('setBack', val)
            }
        }
    },
    data() {
        return {
            drafting: false,
            grid: {
                show: false
            },
            hex: {
                show: false
            },
            setTemp: {
                setting: {
                    margin: {...setCls.margin},
                    padding: {...setCls.padding}
                }
            }
        }
    },
    methods: {
        goBack(){
            this.$router.go(-1);
        },
        fmtPx(cssObj){
            let margin = {}, padding = {}
            for (let key in cssObj.margin) {
                if (cssObj.margin.hasOwnProperty(key)) {
                    let css = cssObj.margin[key];
                    margin[key] = css + 'px'
                }
            }
            for (let key in cssObj.padding) {
                if (cssObj.padding.hasOwnProperty(key)) {
                    let css = cssObj.padding[key];
                    padding[key] = css + 'px'
                }
            }
            return {...margin, ...padding};
        },
        async setGrid(temp){
            await this.$refs.slider.clear();
            this.setTemp = temp;
            this.grid.show = true;
        },
        setHex(){
            this.hex.show = true
        },
        getHex(hex){
            this.color = hex;
        },
        editTemps(){//拖拽
            this.drafting = !this.drafting;
        },
        async addTemp(){//添加模板
            this.$store.dispatch('setIsEdit', false);
            this.$router.replace('sourceMaterial');
        },
        async saveTemp(){
            if(!this.tempId){
                this.$notify('请求主键出现异常，请重新选择')
                return ;
            }
            const {code} = await menu_updateById({_id: this.tempId, json: this.cacheTemp, back: this.backGround})
            if(code === 100){
                this.$toast('操作成功')
                await this.$store.dispatch('updateCacheTemp', [])
                await this.$store.dispatch('setTempId', '')
                this.$router.push('tempMenu')
            }
        },
        async delTemp(index){
            try {
                await this.$dialog.confirm({message: '是否删除？'});
                this.cacheTemp.splice(index, 1)
            } catch (error) {}
        },
        async del(){
            try {
                await this.$dialog.confirm({message: '确定删除此模板吗？'});
                const {code} = await menu_delById({_id: this.tempId});
                if(code === 100){
                    this.$toast('操作成功')
                    this.$router.push('tempMenu');
                }
            } catch (error) {}
        }
    },
    mounted(){
        let color = document.getElementById('color').firstElementChild
        color.style.height = '30px'
        color.style.width = '30px'
        color.style['border-radius'] = '5px'
        color.style.border = '1px solid #909399'
        let i = document.createElement("i");
        color.appendChild(i);
        i.className = 'iconfont ali-add1'
        i.style['line-height'] = '30px'
        i.style['margin-left'] = '6px'
        i.style['font-weight'] = 'bold'
        i.style.color = '#FFF'
        let child = document.getElementById('color').lastElementChild
        child.style['z-index'] = 300
    }
}
</script>
<style lang="scss" scoped>
.colorSet{
    margin-top: 55px;
    .van-button {
        height: 30px;
        width: 60px;
        margin-top: 1px;
        font-size: 13px;
        background-color: #409EFF;
        border: 1px solid #409EFF;
        color: #FFF;
    }
    .sets{
        div{
            width: 30px;
            height: 30px;
            float: left;
            margin-left: 10px;
            border: 1px solid #909399;
            border-radius: 5px;
        }
    }
}
.btn {
    margin: 80px 0 30px 0;
    .add {
        .van-button {
            background-color: #FFF;
            border: 1px solid #409EFF;
            color: #409EFF;
        }
    }
}
.ali-cc-close-square{
    margin: 10px 10px 0 0;
    color: #F56C6C;
}
.ali-kujialeqiyezhan_zhinengbuju{
    margin: 9px 15px 0 0;
    color: #909399;
    font-size: 18px;
    font-weight: bold;
}
.ali-tuozhuai{
    margin: 10px 10px 0 0;
    color: #909399;
}
.tempRow{
    border: 1px dashed #909399;
    margin-bottom: 5px;
}

.slider{
    width: 80%;
    margin-left: 10%;
    position: fixed;
    top: 10%;
    z-index: 100;
}
</style>
